<template>
	<view class="title">检疫信息</view>
	<view class="mune" v-for="(item,index) in quarantineData" :key="index">
		<view class="mune-titlie">
			<image src="@/static/cow/node.png" alt="" style="height: 20rpx;width: 20rpx;" />
			<view style="font-size: 24rpx;">{{formatTime(item.F_StTime)}}</view>
		</view>
		<view class="mune-data">
			<view>
				<view>检疫单位: {{item.F_Stand}}</view>
				<view>检疫类型: IMEI: {{item.F_Title}}</view>
				<view>检疫人员: IMEI: {{item.F_UserName}}</view>
				<view class="img">
					<image :src="serverUrl+item.F_ResultImage" alt="" style="height:800rpx;" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		serverUrl
	} from '@/utils/components.js'
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		quarantineInfo
	} from '@/utils/api/Livestock.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import dayjs from 'dayjs'
	// 检疫数据
	const quarantineData = ref(null);


	const fId = ref('')
	onLoad((options) => {
		fId.value = options.fId
	})

	onMounted(async () => {
		const res = await quarantineInfo({
			id: fId.value
		})
		if (res.code == 200) {
			quarantineData.value = res.data
		}
	})
	
	//日期转换函数
	const formatTime = (time) => {
	    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
	}
</script>

<style scoped>
	.title {
		width: 100%;
		height: 80rpx;
		background-color: #EFEFEF;
		padding-left: 20rpx;
		line-height: 80rpx;
	}

	.mune-titlie {
		width: 280rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 40rpx;
	}

	.mune-data {
		margin-left: 50rpx;
		margin-bottom: 20rpx;
		border-left: 1px solid #333;
	}

	.mune-data view {
		font-size: 20rpx;
		line-height: 30rpx;
		margin-left: 20rpx;
		padding: 10rpx 0;
	}
</style>